<!--
 * 会话列表页面
 * @author Junpeng.Li
 * @date 2022-4-6 14:09:41
 *
 * 自定义事件：
 *   - connect(data): 点击【连接】按钮时的回调函数
-->
<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px" @click="onAddSession">创建会话</el-button>
        <el-table :data="sessions" fit>
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="host" label="主机" width="150"/>
            <el-table-column prop="port" label="端口" width="120"/>
            <el-table-column prop="username" label="用户名" width="180"/>
            <el-table-column label="操作" width="230" header-align="center" align="center">
                <template scope="scope">
                    <el-button type="primary" @click="onConn(scope.row)">连 接</el-button>
                    <el-button type="info" @click="onEdit(scope.row)">修 改</el-button>
                    <el-button type="danger" @click="onRemove(scope.row)">删 除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <data-form @load-data="loadData" ref="dataForm"/>
    </div>
</template>

<script>

    import DataForm from './data-form'
    import {findAll, removeById} from "@/api/session-api";
    import {object2Array} from "@/utils/jtool"

    export default {
        name: "session-list",

        components: {DataForm},

        data() {
            return {
                sessions: []
            }
        },

        mounted() {
            this.loadData()
        },

        methods: {

            onAddSession() {
                this.$refs.dataForm.open()
            },

            loadData() {
                this.sessions = object2Array(findAll())
            },

            onConn(row) {
                this.$emit('connect', row)
            },

            onEdit(row) {
                this.$refs.dataForm.open(row)
            },

            onRemove(row) {
                this.$confirm('此操作将删除该连接信息，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeById(row.id).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })

                        this.loadData()
                    })
                }).catch(() => {
                })
            }

        }
    }
</script>

<style scoped>

</style>
